<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            position: absolute;
            width: 100%;
            top: 100px;
            bottom: 100px;
            overflow: hidden;
            transition: all 1s;
        }

        .scroll {
            margin-right: -19px;
            width: 100%;
            transition: all 1s;
        }

        .scroll div {
            height: 23px;
            transition: all 1s;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="scroll">
    </div>
</div>

<script>
    let html = ''
    for (var i = 0; i < 20; i++) {
        html += '<div>hello' + i + '</div>'
    }
    var scroll = document.querySelector('.scroll')
    scroll.innerHTML = html
    var index = 0
    var tag = scroll.getElementsByTagName('div')[0]
    setInterval(function () {
        tag.remove()
        tag = scroll.getElementsByTagName('div')[0]
        tag.style.height = 0
        tag.style.opacity = 0

        if (index >= 20) {
            index = 0
        }
//        scroll.style.transform = 'translate(' + [0, -16 + 'px'] + ')'
        var ul = document.createElement('div')
        ul.innerHTML = index
        scroll.appendChild(ul)
        index++
    }, 1000)
</script>
</body>
</html>